<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局父项常见属性</title>
    <style>
        /* 
        父元素设置的6个属性
        flex-direction:设置主轴的方向(默认主轴是x轴)
            row  默认值从左到右
            row-reverse  
            column  主轴设置为y轴
            column-reverse
        justify-content:设置主轴上的子元素排列方式
            flex-start  默认值从头开始，如果主轴是x轴，则从左到右
            flex-end  从尾部开始排列
            center  在主轴居中对齐
            space-around  平分剩余空间
            space-between  先两边贴边 再平分剩余空间
        flex-wrap:设置子元素是否换行
            nowrap  默认值，不换行
            wrap  换行
        align-items:设置侧轴上的子元素排列方式（单行）
            flex-start  默认值 从上到下
            flex-end  从下到上
            center  挤在一起居中
            stretch  拉伸
        align-content:设置侧轴上的子元素的排列方式（多行）
            flex-start  默认值 在侧轴的头部开始排列
            flex-end  在侧轴的尾部开始排列
            center  在侧轴中间显示
            space-around  子项在侧轴平分剩余空间
            space-between  子项在侧轴先分布在两头，再平分剩余空间
            stretch  设置子项元素高度平分父元素高度
        flex-flow:是flex-direction和flex-wrap属性的复合属性
         */

         /*
         flex布局子项常见属性
         flex 子项目占的份数
         align-self 控制子项自己在侧轴的排列方式
         order 属性定义子项的排列顺序（前后顺序）
         */
         .parent{
            display: flex;
            background-color:coral;
            flex-direction: row;
            /* justify-content: space-between; */
         }
         .child1{
            width: 100px;
            height: 100px;
            background-color: aqua;
         }
         .child2{
            flex:1;
            background-color: rgb(55, 0, 255);
         }
         .child3{
            flex:2;
            background-color: rgb(255, 0, 47);
         }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1">11</div>
        <div class="child2">22</div>
        <div class="child3">22</div>
        <div class="child1">33</div>
        
    </div>
</body>
</html>